{% extends "base.html" %}

{% block title %}
    Role List
{% endblock %}

{% block head %}
   <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="/static/select2-4.0.2/dist/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-datetimepicker.min.css">
{% endblock %}

{% block content %}

    <div class="modal fade" id="sync" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    请确认
                </div>
                <div class="modal-body">
                    是否同步数据
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a class="btn btn-danger btn-ok">同步</a>
                </div>
            </div>
        </div>
    </div>

    <div class="btn-toolbar">
        <button class="btn btn-danger btn-default pull-right" data-toggle="modal" data-target="#sync"  data-href="{% url "sync_asset_to_host" %}">一键同步</button>
    </div>

    <hr/>
    <div class="panel panel-default">

        <div class="panel-heading">
            <div class="title">查询条件</div>
        </div>
            <div class="panel-body">
                <form id="formSearch" role="form" class=form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-sm-1" for="txt_search_status">状态</label>
                        <div class="col-sm-2">
                            <select id="status_type" name="status_type" class="js-example-basic-multiple js-states form-control" multiple="multiple">
                                <option value="1">未使用</option>
                                <option value="2">使用中</option>
                                <option value="3">故障</option>
                                <option value="4">其它</option>
                            </select>
                        </div>

                       <label class="control-label col-sm-1" for="txt_search_status">设备组</label>
                        <div class="col-sm-2">
                            <select id="group_type" name="group_type" class="js-example-basic-multiple js-states form-control" multiple="multiple">
                                {% for g in group %}
                                        <option value="{{ g.id }}">{{ g.name }}</option>
                                    {% endfor %}
                            </select>
                        </div>


                     <label class="control-label col-sm-1" for="txt_search_status">设备类型</label>
                        <div class="col-sm-2">
                            <select id="asset_type" name="asset_type" class="js-example-basic-multiple js-states form-control" multiple="multiple">
                                <option value="1">物理机</option>
                                <option value="2">虚拟机</option>
                            </select>
                        </div>

                       <label class="control-label col-sm-1">环境</label>
                            <div class="col-sm-2">
                                <select id="vlan_type" name="vlan_type" class="js-example-basic-multiple js-states form-control" multiple="multiple">
                                        {% for env in source %}
                                        <option value="{{ env.id }}">{{ env.vlan_id }} {{ env.env }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-1">项目名称</label>
                        <div class="col-sm-2">
                            <select id="project_type" name="project_type"  class="js-example-basic-multiple js-states form-control" multiple="multiple">
                                {% for p in project %}
                                <option value="{{ p.id }}">{{ p.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-2">开始时间</label>
                        <div class="col-sm-2">
                            <div class='input-group date' id='datetimepicker1'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                            </div>

                        </div>

                        <label class="control-label col-sm-2">结束时间</label>
                        <div class="col-sm-2">
                            <div class='input-group date' id='datetimepicker2'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-sm-12">
                        <button type="button" style="margin-right:20px"  id="refresh" class="btn btn-primary pull-right">查询</button>
                    </div>

                </form>
            </div>
    </div>



        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" data-toggle="modal" data-target="#host_add" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" data-toggle="modal" data-target="#host_edit" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_detail" type="button" data-toggle="modal" data-target="#host_detail" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>查看
            </button>
            <button id="btn_delete" type="button" data-toggle="modal" data-target="#host_delete" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>

        </div>

    </div>


    <div class="modal fade" id="host_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    添加新的主机
                </div>
                <div class="modal-body">
                     <form id="host_add_Form" role="form" method="post" class="form-horizontal">
						<table class="table table-bordered table-hover table-striped">
							<thead>
								<tr>
									<th>类别</th>
									<th>内容</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td> <label>主机名称:</label></td>
									<td> <input id="id_hostname" class="form-control" type="text" name="id_hostname" /></td>
								</tr>
                                <tr>
                                  <td><label>过期日期:</label></td>
                                <td><div class='input-group date' id='datetimepicker3'>
                                    <input id="id_terminal_time" type='text' class="form-control" />
                                    <span class="input-group-addon">
                                       <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div></td>
								</tr>
								<tr>
									<td><label>主机IP:</label></td>
									<td><input type="text" id="id_ip" class="form-control" name="id_ip" /></td>
								</tr>

                                <tr>
									<td><label>设备类型:</label></td>
                                <td><select id="id_asset_type" name="id_asset_type" class="js-example-basic-multiple js-states form-control">
                                   <option value="1">物理机</option>
                                   <option value="2">虚拟机</option>
                                </select></td>
                                </tr>

								<tr>
									<td><label>序列号:</label></td>
									<td><input id="id_sn" type="text" class="form-control" name="id_sn" /></td>
								</tr>
                                <tr>
									<td><label>内核：</label></td>
									<td><input type="text" id="id_os" class="form-control" name="id_os" /></td>
								</tr>
								<tr>
									<td><label>内核版本：</label></td>
									<td><input type="text" id="id_kernel" class="form-control" name="id_kernel" /></td>
								</tr>
								<tr>
									<td><label>系统版本:</label></td>
									<td><input id="id_kernel_release" type="text" class="form-control" name="id_kernel_release" /></td>
								</tr>
								<tr>
									<td><label>厂商名:</label></td>
									<td><input type="text" id="id_manufacturer" class="form-control" name="id_manufacturer" /></td>
								</tr>
								<tr>
									<td> <label>CPU型号:</label></td>
									<td><input id="id_cpu_model" type="text" class="form-control" name="id_cpu_model" /></td>
								</tr>
								<tr>
									<td><label>CPU数量:</label></td>
									<td><input type="text" id="id_num_cpus" class="form-control" name="id_num_cpus" /></td>
								</tr>
								<tr>
									<td><label>磁盘总容量：</label></td>
									<td><input id="id_disk_total" type="text" class="form-control" name="id_disk_total" /></td>
								</tr>
								<tr>
									<td><label>磁盘:</label></td>
										<td><input type="text" id="id_disks" class="form-control" name="id_disks" /></td>
								</tr>
								<tr>
									<td><label>内存:</label>
										<td><input id="id_memory" type="text" class="form-control" name="id_memory" /></td>
								</tr>
								<tr>
									<td><label>UUID:</label>
										<td><input type="text" id="id_uuid" class="form-control" name="id_uuid" /></td>
								</tr>
								<tr>
									<td><label>ilo IP:</label>
										<td><input type="text" id="id_ilo" class="form-control" name="id_uuid" /></td>

								</tr>
								<tr>
									<td><label>VIP:</label>
                                    <td><input type="text" id="id_vip" class="form-control" name="id_vip" /></td>
								</tr>
                            	<td><label>固定资产编号:</label>
										<td><input type="text" id="id_asset_no" class="form-control" name="id_asset_no" />
                                </td>
								</tr>
                                <tr>
                                <td><label>所在位置:</label>
										<td><input type="text" id="id_location" class="form-control" name="id_location" />
                                </td>
								</tr>

                                <tr>
                                <td><label>设备组:</label></td>
										<td>
                                        <select id="id_group" name="id_group" class="js-example-basic-multiple js-states form-control" multiple="multiple">
                                             {% for g in group %}
                                        <option value="{{ g.id }}">{{ g.name }}</option>
                                    {% endfor %}
                                     </select></td>
								</tr>

                              <tr>
                                <td><label>项目:</label></td>
										<td>
                                        <select id="id_project" name="id_project" class="js-example-basic-multiple js-states form-control" multiple="multiple">
                                             {% for p in project %}
                                        <option value="{{ p.id }}">{{ p.name }}</option>
                                    {% endfor %}
                                     </select></td>
								</tr>
                            <tr>
                                <td><label>备注:</label>
										<td><input type="text" id="id_memo" class="form-control" name="id_memo" />
                                </td>
								</tr>



							</tbody>
						</table>
					</form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="DoSubmit();">提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>


      <div class="modal fade" id="host_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    编辑主机详情
                </div>
                <div class="modal-body">
                     <form id="host_edit_Form" role="form" method="post" class="form-horizontal">
						<table class="table table-bordered table-hover table-striped">
							<thead>
								<tr>
									<th>类别</th>
									<th>内容</th>
								</tr>
							</thead>
							<tbody>
                               <tr>
									<td> <label>主机ID:</label></td>
									<td> <input readonly="readonly" id="edit_id" class="form-control" type="text" name="edit_id" /></td>
								</tr>
								<tr>
									<td> <label>主机名称:</label></td>
									<td> <input id="edit_hostname" class="form-control" type="text" name="edit_hostname" /></td>
								</tr>
                                <tr>
                                  <td><label>过期日期:</label></td>
                                <td><div class='input-group date' id='datetimepicker5'>
                                    <input id="edit_terminal_time" type='text' class="form-control" />
                                    <span class="input-group-addon">
                                       <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div></td>
								</tr>
                                     <tr><td><label>主机状态:</label></td>
                                <td><select id="edit_status" name="edit_status" class="js-example-basic-multiple js-states form-control">
                                <option value="1">未使用</option>
                                <option value="2">使用中</option>
                                <option value="3">故障</option>
                                <option value="4">其它</option>
                            </select>
                                </td>
                                </tr>
								<tr>
									<td><label>主机IP:</label></td>
									<td><input type="text" id="edit_ip" class="form-control" name="edit_ip" /></td>
								</tr>
								<tr>
                               <tr>
									<td><label>设备类型:</label></td>
                                <td><select id="edit_asset_type" name="edit_asset_type" class="js-example-basic-multiple js-states form-control">
                                   <option value="1">物理机</option>
                                   <option value="2">虚拟机</option>
                                </select></td>
                                </tr>
									<td><label>序列号:</label></td>
									<td><input id="edit_sn" type="text" class="form-control" name="edit_sn" /></td>
								</tr>
                                <tr>
									<td><label>内核：</label></td>
									<td><input type="text" id="edit_os" class="form-control" name="edit_os" /></td>
								</tr>

								<tr>
									<td><label>内核版本：</label></td>
									<td><input type="text" id="edit_kernel" class="form-control" name="edit_kernel" /></td>
								</tr>
								<tr>
									<td><label>系统版本:</label></td>
									<td><input id="edit_kernel_release" type="text" class="form-control" name="edit_kernel_release" /></td>
								</tr>
								<tr>
									<td><label>厂商名:</label></td>
									<td><input type="text" id="edit_manufacturer" class="form-control" name="edit_manufacturer" /></td>
								</tr>
								<tr>
									<td> <label>CPU型号:</label></td>
									<td><input id="edit_cpu_model" type="text" class="form-control" name="edit_cpu_model" /></td>
								</tr>
								<tr>
									<td><label>CPU数量:</label></td>
									<td><input type="text" id="edit_num_cpus" class="form-control" name="edit_num_cpus" /></td>
								</tr>
								<tr>
									<td><label>磁盘总容量：</label></td>
									<td><input id="edit_disk_total" type="text" class="form-control" name="edit_disk_total" /></td>
								</tr>


								<tr>
									<td><label>磁盘:</label>
										<td><input type="text" id="edit_disks" class="form-control" name="edit_disks" />
								</tr>
								<tr>
									<td><label>内存:</label>
										<td><input id="edit_memory" type="text" class="form-control" name="edit_memory" />
								</tr>
								<tr>
									<td><label>UUID:</label>
										<td><input type="text" id="edit_uuid" class="form-control" name="edit_uuid" />
								</tr>
								<tr>
									<td><label>ilo IP:</label>
										<td><input type="text" id="edit_ilo" class="form-control" name="edit_uuid" />

								</tr>
								<tr>
									<td><label>VIP:</label>
										<td><input type="text" id="edit_vip" class="form-control" name="edit_vip" />
								</tr>

                                <tr>
                            	<td><label>固定资产编号:</label>
										<td><input type="text" id="edit_asset_no" class="form-control" name="edit_asset_no" />
								</tr>
                                  <tr>
                            	<td><label>VLAN:</label>
										<td><input readonly="readonly" type="text" id="edit_vlan" class="form-control" name="edit_vlan" />
								</tr>
                                  <tr>
                            	<td><label>环境:</label>
										<td><input readonly="readonly" type="text" id="edit_env" class="form-control" name="edit_env" />
								</tr>
                                  <tr>
                                <td><label>所在位置:</label>
										<td><input type="text" id="edit_location" class="form-control" name="edit_location" />
                                </td>
								</tr>

                                <tr>
                                <td><label>设备组:</label>
										<td><select id="edit_group" name="edit_group" class="js-example-basic-multiple js-states form-control" >
                                             {% for g in group %}
                                        <option value="{{ g.id }}">{{ g.name }}</option>
                                    {% endfor %}
                                    </select></td>
								</tr>
                                <tr>
                                <td><label>项目:</label>
										<td><select id="edit_project" name="edit_project" class="js-example-basic-multiple js-states form-control">
                                             {% for p in project %}
                                        <option value="{{ p.id }}">{{ p.name }}</option>
                                    {% endfor %}
                                    </select></td>
								</tr>
                                 <tr>
                                  <td><label>创建时间:</label></td>
                                <td><div class='input-group date'>
                                    <input readonly="readonly" id="edit_create_time" type='text' class="form-control" />
                                    <span class="input-group-addon">
                                       <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div></td>
								</tr>
                                 <tr>
                                  <td><label>更新时间:</label></td>
                                <td><div class='input-group date'>
                                    <input readonly="readonly" id="edit_update_time" type='text' class="form-control" />
                                    <span class="input-group-addon">
                                       <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div></td>
								</tr>
                                 <tr>
                                <td><label>备注:</label>
										<td><input type="text" id="edit_memo" class="form-control" name="edit_memo" />
                                </td>
								</tr>
                              <tr>
                                 <td><label> 数据中心:</label>
										<td><input type="text" id="edit_idc" class="form-control" name="edit_idc" />
                                </td>
								</tr>


							</tbody>
						</table>
					</form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="DoEdit();">更新</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="host_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    查看主机详情
                </div>
                <div class="modal-body">
                 <form id="host_detail_Form" role="form" method="post" class="form-horizontal">
						<table class="table table-bordered table-hover table-striped">
							<thead>
								<tr>
									<th>类别</th>
									<th>内容</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td> <label>主机名称:</label></td>
									<td> <input id="detail_hostname" class="form-control" type="text" name="detail_hostname" /></td>
								</tr>
                                <tr>
                                  <td><label>过期日期:</label></td>
                                <td><div class='input-group date' id='datetimepicker4'>
                                    <input id="detail_terminal_time" type='text' class="form-control" />
                                    <span class="input-group-addon">
                                       <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div></td>
								</tr>

                                <tr><td><label>主机状态:</label></td>
                                <td><select id="detail_status" name="detail_status" class="js-example-basic-multiple js-states form-control">
                                <option value="1">未使用</option>
                                <option value="2">使用中</option>
                                <option value="3">故障</option>
                                <option value="4">其它</option>
                            </select>
                                </td>
                                </tr>

								<tr>
									<td><label>主机IP:</label></td>
									<td><input type="text" id="detail_ip" class="form-control" name="detail_ip" /></td>
								</tr>
								<tr>
									<td><label>序列号:</label></td>
									<td><input id="detail_sn" type="text" class="form-control" name="detail_sn" /></td>
								</tr>
                                <tr>
									<td><label>内核：</label></td>
									<td><input type="text" id="detail_os" class="form-control" name="detail_os" /></td>
								</tr>

								<tr>
									<td><label>内核版本：</label></td>
									<td><input type="text" id="detail_kernel" class="form-control" name="detail_kernel" /></td>
								</tr>
								<tr>
									<td><label>系统版本:</label></td>
									<td><input id="detail_kernel_release" type="text" class="form-control" name="detail_kernel_release" /></td>
								</tr>
								<tr>
									<td><label>厂商名:</label></td>
									<td><input type="text" id="detail_manufacturer" class="form-control" name="detail_manufacturer" /></td>
								</tr>
								<tr>
									<td> <label>CPU型号:</label></td>
									<td><input id="detail_cpu_model" type="text" class="form-control" name="detail_cpu_model" /></td>
								</tr>
								<tr>
									<td><label>CPU数量:</label></td>
									<td><input type="text" id="detail_num_cpus" class="form-control" name="detail_num_cpus" /></td>
								</tr>
								<tr>
									<td><label>磁盘总容量：</label></td>
									<td><input id="detail_disk_total" type="text" class="form-control" name="detail_disk_total" /></td>
								</tr>
								<tr>
									<td><label>磁盘:</label>
										<td><input type="text" id="detail_disks" class="form-control" name="detail_disks" />
								</tr>
								<tr>
									<td><label>内存:</label>
										<td><input id="detail_memory" type="text" class="form-control" name="detail_memory" />
								</tr>
								<tr>
									<td><label>UUID:</label>
										<td><input type="text" id="detail_uuid" class="form-control" name="detail_uuid" />
								</tr>
								<tr>
									<td><label>ilo IP:</label>
										<td><input type="text" id="detail_ilo" class="form-control" name="detail_uuid" />

								</tr>
								<tr>
									<td><label>VIP:</label>
										<td><input type="text" id="detail_vip" class="form-control" name="detail_vip" />
								</tr>
                                <tr>
                            	<td><label>固定资产编号:</label>
										<td><input type="text" id="detail_asset_no" class="form-control" name="detail_asset_no" />
								</tr>
                                  <tr>
                            	<td><label>VLAN:</label>
										<td><input type="text" id="detail_vlan" class="form-control" name="detail_vlan" />
								</tr>
                                  <tr>
                            	<td><label>环境:</label>
										<td><input type="text" id="detail_env" class="form-control" name="detail_env" />
								</tr>
                                   <tr>
                                <td><label>所在位置:</label>
										<td><input type="text" id="detail_location" class="form-control" name="detail_location" />
                                </td>
								</tr>

                                <tr>
                                <td><label>设备组:</label>
										<td><select id="detail_group" name="detail_group" class="js-example-basic-multiple js-states form-control" multiple="multiple">
                                             {% for g in group %}
                                        <option value="{{ g.id }}">{{ g.name }}</option>
                                    {% endfor %}
                                    </select></td>
								</tr>
                                <tr>
                                <td><label>项目:</label>
										<td><select id="detail_project" name="detail_project" class="js-example-basic-multiple js-states form-control">
                                             {% for p in project %}
                                        <option value="{{ p.id }}">{{ p.name }}</option>
                                    {% endfor %}
                                    </select></td>
								</tr>
                                <tr>
                                 <td><label> 数据中心:</label>
										<td><input type="text" id="detail_idc" class="form-control" name="detail_idc" />
                                </td>
								</tr>
                                <tr>
                            <td><label>备注:</label>
										<td><input type="text" id="detail_memo" class="form-control" name="detail_memo" />
                                </td>
								</tr>


							</tbody>
						</table>
                 </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>


     <div class="modal fade" id="host_delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    请确认删除
                </div>
                <div class="modal-body">
                    主机编号:<input readonly="readonly" type=text id="did"> 主机名称:<text id="dhost"></text>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="DoDelete()">确认</button>
                </div>
            </div>
        </div>
    </div>


        <div class="col-lg-10">
            <table id="asset_list_table" class="display table table-hover col-md-10" data-toggle="table"></table>
        </div>



    <script src="/static/js/bootstrap-table.min.js"></script>
    <script src="/static/js/bootstrap-table-locale-all.min.js"></script>
    <script src="/static/select2-4.0.2/dist/js/select2.min.js"></script>
    <script src="/static/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/static/js/moment-with-locales.min.js"></script>



{#    one key sync#}
    <script type="application/javascript">

    $('#sync').on('show.bs.modal', function(e) {
    $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
    });

    </script>





    <script type="application/javascript">

        $("#asset_list_table").bootstrapTable({
            url: '/cmdb/show_host_in_table',
            toolbar: '#toolbar',
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: Params,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 25,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            showColumns: true,
            showRefresh: true,
            columns: [{
                checkbox: true
            }, {
                field: 'host_id',
                title: '主机id',
                align: 'center',
            },{
                field: 'host_hostname',
                title: '主机名称',
                align: 'center',
                sortable: 'true',
            },{
                field: 'host_ip',
                title: 'IP',
                align: 'center',
                sortable: 'true',
            },{
                field: 'host_cpu_model',
                title: 'CPU型号',
                sortable: 'center',
            },{
                field: 'host_cpu_num',
                title: 'CPU数量',
                align: 'center',
            },{
                field: 'host_memory',
                title: '内存',
                align: 'center',
            },{
                field: 'host_create_time',
                title: '创建时间',
                align: 'center',
            },{
                field: 'host_update_time',
                title: '最后更新时间',
                align: 'center',
            },
                {
                field: 'host_host_disk',
                title: '磁盘总容量',
                align: 'center',
            },

                ]


});
     function Params(params) {  //配置参数
    var temp = {
        pageSize: params.limit,
        pageNumber: params.pageNumber,
        txt_search_vlan_type: $("#vlan_type").val(),
        txt_search_project_type: $("#project_type").val(),
        txt_search_group_type: $("#group_type").val(),
        txt_search_vlan_id: $("#vlan_type").val(),
        txt_search_status_type: $("#status_type").val(),
        search: params.search,
        page: params.offset,
        sortName: params.sort,
        sortOrder: params.order //排位命令（desc，asc）
    };
    return temp;
}

$('#refresh').click(function () {
    ////刷新处理，指定query 的参数，注：此地方指定的参数，仅在当次刷新时使用
    $("#asset_list_table").bootstrapTable('refresh');
});


</script>


    <script>
        $(function () {
            $('#datetimepicker1').datetimepicker({
                format: 'yyyy-mm-dd hh:mm',
                locale: moment.locale('zh-cn'),
                minView: 'day',
                autoclose: true,
                todayBtn: true,
            });
            $('#datetimepicker2').datetimepicker({
                format: 'yyyy-mm-dd hh:mm',
                locale: moment.locale('zh-cn'),
                minView: 'day',
                autoclose: true,
                todayBtn: true,
            });

            $('#datetimepicker3').datetimepicker({
                format: 'yyyy-mm-dd hh:mm',
                locale: moment.locale('zh-cn'),
                minView: 'day',
                autoclose: true,
                todayBtn: true,
            });

            $('#datetimepicker4').datetimepicker({
                format: 'yyyy-mm-dd hh:mm',
                locale: moment.locale('zh-cn'),
                minView: 'day',
                autoclose: true,
                todayBtn: true,
            });

            $('#datetimepicker5').datetimepicker({
                format: 'yyyy-mm-dd hh:mm',
                locale: moment.locale('zh-cn'),
                minView: 'day',
                autoclose: true,
                todayBtn: true,
            });
        });
    </script>


{# host_detail #}
<script type="application/javascript">

        $(function () {
            $("#btn_detail").click(function () {
                var $table = $("#asset_list_table")
                var SelectArray = $table.bootstrapTable('getSelections')
                var JsonDic = SelectArray[0]


                $('#host_detail').one('show.bs.modal', function (e) {
                    $('#detail_hostname').val(JsonDic.host_hostname);
                    $('#detail_ip').val(JsonDic.host_ip);
                    $('#detail_os').val(JsonDic.host_os);
                    $('#detail_sn').val(JsonDic.host_sn);
                    $('#detail_kernel').val(JsonDic.host_kernel);
                    $('#detail_kernel_release').val(JsonDic.host_kernel_release);
                    $('#detail_manufacturer').val(JsonDic.host_vendor);
                    $('#detail_cpu_model').val(JsonDic.host_cpu_model);
                    $('#detail_num_cpus').val(JsonDic.host_cpu_num);
                    $('#detail_disk_total').val(JsonDic.host_disk);
                    $('#detail_disks').val(JsonDic.host_disk);
                    $('#detail_memory').val(JsonDic.host_memory);
                    $('#detail_uuid').val(JsonDic.host_uuid);
                    $('#detail_ilo').val(JsonDic.host_ilo_ip);
                    $('#detail_vip').val(JsonDic.host_vip);
                    $('#detail_asset_no').val(JsonDic.host_asset_no);
                    $('#detail_vlan').val(JsonDic.host_vlan);
                    $('#detail_env').val(JsonDic.host_env);
                    $('#detail_terminal_time').val(JsonDic.host_terminal_time);
                    $("#detail_project").select2({
                        placeholder: "Select a state"
                    });
                    $("#detail_project").val(JsonDic.host_project).trigger("change");
                    $("#detail_group").select2({
                        placeholder: "Select a state"
                    });
                    $("#detail_group").val(JsonDic.host_group).trigger("change");

                       $("#detail_status").select2({
                        placeholder: "Select a state"
                    });
                    $("#detail_status").val(JsonDic.host_status).trigger("change");
                })

            });
          })

</script>

{# host_add #}
    <script type="application/javascript">
        function DoSubmit(){
            var input_dict = {};
            var host_hostname = document.getElementById("id_hostname").value;
            var host_ip = document.getElementById("id_ip").value;
            var host_sn = document.getElementById("id_sn").value;
            var host_kernel = document.getElementById("id_kernel").value;
            var host_kernel_release = document.getElementById("id_kernel_release").value;
            var host_manufacturer = document.getElementById("id_manufacturer").value;
            var host_cpu_model = document.getElementById("id_cpu_model").value;
            var host_num_cpus = document.getElementById("id_num_cpus").value;
            var host_disk_total = document.getElementById("id_disk_total").value;
            var host_disks = document.getElementById("id_disks").value;
            var host_memory = document.getElementById("id_memory").value;
            var host_uuid = document.getElementById("id_uuid").value;
            var host_ilo = document.getElementById("id_ilo").value;
            var host_vip = document.getElementById("id_vip").value;
            var host_asset_no = document.getElementById("id_asset_no").value;
            var host_os = document.getElementById("id_os").value;
            var host_group = document.getElementById("id_group").value
            var host_terminal_time = document.getElementById("id_terminal_time").value
            var host_project = document.getElementById("id_project").value
            var host_location = document.getElementById("id_location").value
            var host_memo = document.getElementById("id_memo").value

            input_dict["host_hostname"] = host_hostname;
            input_dict["host_ip"] = host_ip;
            input_dict["host_os"] = host_os;
            input_dict["host_sn"] = host_sn;
            input_dict["host_kernel"] = host_kernel;
            input_dict["host_kernel_release"] = host_kernel_release;
            input_dict["host_manufacturer"] = host_manufacturer;
            input_dict["host_cpu_model"] = host_cpu_model;
            input_dict["host_num_cpus"] = host_num_cpus;
            input_dict["host_disk_total"] = host_disk_total;
            input_dict["host_disks"] = host_disks;
            input_dict["host_memory"] = host_memory;
            input_dict["host_uuid"] = host_uuid;
            input_dict["host_ilo"] = host_ilo;
            input_dict["host_vip"] = host_vip;
            input_dict["host_asset_no"] = host_asset_no;
            input_dict["host_terminal_time"] = host_terminal_time;
            input_dict["host_group"] = host_group;
            input_dict["host_project"] = host_project;

            console.log(input_dict);

            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            });

            $.ajax({
                url:'{% url "create_host" %}',
                type:'POST',
                data:input_dict,
                success:function (data) {
                    console.log(data);
                    alert(JSON.stringify(data))
                    $("#asset_list_table").bootstrapTable('refresh');
                },
                error:function () {
                    alert("post data error")
                }
            });

            clearForm($('#host_add_Form'));
            function clearForm(form) {
                // input清空
                $(':input', form).each(function () {
                    var type = this.type;
                    var tag = this.tagName.toLowerCase(); // normalize case
                    if (type == 'text' || type == 'password' || tag == 'textarea')
                        this.value = "";
                    // 多选checkboxes清空
                    // select 下拉框清空
                    else if (tag == 'select')
                        this.selectedIndex = -1;
                });
            };
        }
                $("#id_group").select2({
                        placeholder: "Select a state" });
                $("#id_project").select2({
                        placeholder: "Select a state" });

    </script>

<script type="application/javascript">

        $(function () {
            $("#btn_edit").click(function () {
                var $table = $("#asset_list_table")
                var SelectArray = $table.bootstrapTable('getSelections')
                var JsonDic = SelectArray[0]
                $('#host_edit').one('show.bs.modal', function (e) {
                    $('#edit_id').val(JsonDic.host_id);
                    $('#edit_hostname').val(JsonDic.host_hostname);
                    $('#edit_ip').val(JsonDic.host_ip);
                    $('#edit_os').val(JsonDic.host_os);
                    $('#edit_sn').val(JsonDic.host_sn);
                    $('#edit_kernel').val(JsonDic.host_kernel);
                    $('#edit_kernel_release').val(JsonDic.host_kernel_release);
                    $('#edit_manufacturer').val(JsonDic.host_vendor);
                    $('#edit_cpu_model').val(JsonDic.host_cpu_model);
                    $('#edit_num_cpus').val(JsonDic.host_cpu_num);
                    $('#edit_disk_total').val(JsonDic.host_disk);
                    $('#edit_disks').val(JsonDic.host_disks);
                    $('#edit_memory').val(JsonDic.host_memory);
                    $('#edit_uuid').val(JsonDic.host_uuid);
                    $('#edit_ilo').val(JsonDic.host_ilo_ip);
                    $('#edit_vip').val(JsonDic.host_vip);
                    $('#edit_asset_no').val(JsonDic.host_asset_no);
                    $('#edit_vlan').val(JsonDic.host_vlan);
                    $('#edit_env').val(JsonDic.host_env);
                    $('#edit_terminal_time').val(JsonDic.host_terminal_time);
                    $('#edit_create_time').val(JsonDic.host_create_time);
                    $('#edit_update_time').val(JsonDic.host_update_time);
                    $('#edit_asset_type').val(JsonDic.host_asset_type);
                    $('#edit_location').val(JsonDic.host_location);
                    $('#edit_memo').val(JsonDic.host_memo);
                    $("#edit_project").select2({
                        placeholder: "Select a state"
                    });
                    $("#edit_project").val(JsonDic.host_project).trigger("change");
                    $("#edit_asset_type").select2({
                        placeholder: "Select a state"
                    });
                    $("#edit_asset_type").val(JsonDic.host_asset_type).trigger("change");

                    $("#edit_group").select2({
                        placeholder: "Select a state"
                    });
                    $("#edit_group").val(JsonDic.host_group).trigger("change");
                    $("#edit_status").select2({
                        placeholder: "Select a state"
                    });
                    $("#edit_status").val(JsonDic.host_status).trigger("change");
                });
            })
        })

        function DoEdit() {
                    var input_dict = {};
                    var pk = document.getElementById("edit_id").value;
                    input_dict["host_hostname"] = document.getElementById("edit_hostname").value;
                    input_dict["host_ip"] = document.getElementById("edit_ip").value;
                    input_dict["host_os"] = document.getElementById("edit_os").value;
                    input_dict["host_sn"] = document.getElementById("edit_sn").value;
                    input_dict["host_kernel"] = document.getElementById("edit_kernel").value;
                    input_dict["host_kernel_release"] = document.getElementById("edit_kernel_release").value;
                    input_dict["host_manufacturer"] = document.getElementById("edit_manufacturer").value;
                    input_dict["host_cpu_model"] = document.getElementById("edit_cpu_model").value;
                    input_dict["host_num_cpus"] = document.getElementById("edit_num_cpus").value;
                    input_dict["host_disk_total"] = document.getElementById("edit_disk_total").value;
                    input_dict["host_disks"] = document.getElementById("edit_disks").value;
                    input_dict["host_memory"] = document.getElementById("edit_memory").value;
                    input_dict["host_uuid"] = document.getElementById("edit_uuid").value;
                    input_dict["host_ilo"] = document.getElementById("edit_ilo").value;
                    input_dict["host_vip"] = document.getElementById("edit_vip").value;
                    input_dict["host_asset_no"] = document.getElementById("edit_asset_no").value;
                    input_dict["host_terminal_time"] = document.getElementById("edit_terminal_time").value
                    input_dict["host_group"] = document.getElementById("edit_group").value;
                    input_dict["host_project"] = document.getElementById("edit_project").value;
                    input_dict["host_status"] = document.getElementById("edit_status").value;
                    input_dict["host_asset_type"] = document.getElementById("edit_asset_type").value;
                    console.log(input_dict);
                    alert(JSON.stringify(input_dict));

                $.ajaxSetup({
                    data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
                });
                  var post_url = '/cmdb/edit_host/' + pk + '/'
                $.ajax({
                    url: post_url,
                    type: 'POST',
                    data: input_dict,
                    success: function (data) {
                        console.log(data);
                        alert(JSON.stringify(data))
                        $("#asset_list_table").bootstrapTable('refresh');
                    },
                    error: function () {
                        alert("post data error")
                    }
                })

                }
</script>


<script type="application/javascript">

        $(function () {
            $("#btn_delete").click(function () {
                var $table = $("#asset_list_table")
                var SelectArray = $table.bootstrapTable('getSelections')
                var JsonDic = SelectArray[0]

                $('#host_delete').one('show.bs.modal', function (e) {
                    $('#dhost').html(JsonDic.host_hostname);
                    $('#did').val(JsonDic.host_id);
                })

            })
        })

            function DoDelete() {
                var input_dict = {};
                var pk = document.getElementById("did").value;
                $.ajaxSetup({
                    data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
                });
                var post_url = '/cmdb/delete_host/' + pk + '/'
                $.ajax({
                    url: post_url,
                    type: 'POST',
                    data: input_dict,
                    success: function (data) {
                        console.log(data);
                       alert(JSON.stringify(data))
                        $("#asset_list_table").bootstrapTable('refresh');
                    },
                    error: function () {
                        alert("post data error")
                    }
                })
            }


</script>

    <script type="application/javascript">
        $("#asset_type").select2({
            placeholder: "Select a state",
             allowClear: true,
        });
        $("#project_type").select2({
            placeholder: "Select a state"
        });

        $("#vlan_type").select2({
            placeholder: "Select a state"
        });
        $("#group_type").select2({
            placeholder: "Select a state"
        });
         $("#status_type").select2({
            placeholder: "Select a state"
        });



    </script>

{% endblock %}


{#                    clearForm($('#host_edit_Form'));#}
{#                          function clearForm(form) {#}
{#                // input清空#}
{#                $(':input', form).each(function () {#}
{#                    var type = this.type;#}
{#                    var tag = this.tagName.toLowerCase(); // normalize case#}
{#                    if (type == 'text' || type == 'password' || tag == 'textarea')#}
{#                        this.value = "";#}
{#                    // 多选checkboxes清空#}
{#                    // select 下拉框清空#}
{#                    else if (tag == 'select')#}
{#                        this.selectedIndex = -1;#}
{#                });#}
{#            };#}